<template>
  <div class="register_container">
    <!--logo-->
    <div class="logo_container">
      <img :src="logoSrc" alt="加载失败"/>
    </div>

    <!--提示-->
    <div class="prompt">
      <h2>注册</h2>
      <p>欢迎注册使用</p>
    </div>

    <div class="register_form">
      <van-row class="form_item">
        <van-col span="3" class="item_content">
           <span class="icon_container">
             <i class="fa  fa-user"></i>
           </span>
        </van-col>
        <van-col span="21" class="item_content">
          <input type="tel" placeholder="请输入昵称" v-model="registerParams.nickName" class="inputItem"
                 @blur="validateNickName"/>
        </van-col>
      </van-row>
      <van-row class="form_item">
        <van-col span="3" class="item_content">
           <span class="icon_container">
             <i class="fa  fa-user-circle-o"></i>
           </span>
        </van-col>
        <van-col span="21" class="item_content">
          <input type="text" placeholder="请输入手机号码" v-model="registerParams.account" class="inputItem"
                 @blur="validateAccount"/>
        </van-col>
      </van-row>
      <van-row class="form_item">
        <van-col span="3" class="item_content">
           <span class="icon_container">
            <van-icon name="free-postage"/>
           </span>
        </van-col>
        <van-col span="21" class="item_content">
          <input type="email" placeholder="请输入邮箱" v-model="registerParams.email" class="inputItem"
                 @blur="validateEmail"/>
        </van-col>
      </van-row>
      <van-row class="form_item">
        <van-col span="3" class="item_content">
           <span class="lock">
             <i class="fa  fa-lock"></i>
           </span>
        </van-col>
        <van-col span="21" class="item_content">
          <input type="password" placeholder="请输入密码" v-model="registerParams.password" class="inputItem"
                 @blur="validatePassword"/>
        </van-col>
      </van-row>
      <van-row class="form_item">
        <van-col span="3" class="item_content">
           <span class="lock">
             <i class="fa  fa-unlock-alt"></i>
           </span>
        </van-col>
        <van-col span="21" class="item_content">
          <input type="password" placeholder="再次输入密码" v-model="registerParams.repPassword" class="inputItem"/>
        </van-col>
      </van-row>
      <van-radio-group v-model="registerParams.sex" direction="horizontal" class="Radio">
        <van-radio name="0">男</van-radio>
        <van-radio name="1">女</van-radio>
      </van-radio-group>
    </div>

    <!--注册按钮-->
    <div class="buttonGroup">
      <van-button @click="submitRegister" size="large" round type="primary" class="registerButton"
                  :loading="loading">注册
      </van-button>
    </div>

    <!--链接-->
    <p class="loginTips">
      <router-link to="/login">已注册？立即登录</router-link>
    </p>
  </div>
</template>

<script>
//引入规则
import {mobileReg, emailRegx, nickRegx, pwdReg} from "@/Regular/regx.js";

export default {
  name: "Register",

  data() {
    return {
      // 图标地址
      logoSrc: require("../assets/Images/logo.jpg"),

      //注册的字段内容
      registerParams: {
        nickName: "",
        account: "",
        email: "",
        password: "",
        sex: "0",
        repPassword: ""
      },

      // 验证注册字段
      isValidateNickName: false,
      isValidateAccount: false,
      isValidateEmail: false,
      isValidatePassword: false,
      isValidateRepPassword: false,

      // 加载状态
      loading: false
    };
  },
  methods: {
    // 验证两次输入的密码是否一致
    validateNickName() {
      if (this.registerParams.nickName === "") {
        this.$toast("请输入昵称");
        this.isValidateNickName = false;
        return;
      }
      if (!nickRegx.test(this.registerParams.nickName)) {
        this.$toast("请输入中文数字字母");
        this.isValidateNickName = false;
        return;
      }
      this.isValidateNickName = true;
    },
    validateAccount() {
      if (this.registerParams.account === "") {
        this.$toast("请输入手机号码");
        this.isValidateAccount = false;
        return;
      }
      if (!mobileReg.test(this.registerParams.account)) {
        this.$toast("请输入正确的手机号码");
        this.isValidateAccount = false;
        return;
      }
      this.isValidateAccount = true;
    },
    validateEmail() {
      if (this.registerParams.email === "") {
        this.$toast("请输入邮箱");
        this.isValidateEmail = false;
        return;
      }
      if (!emailRegx.test(this.registerParams.email)) {
        this.$toast("请输入正确的邮箱");
        this.isValidateEmail = false;
        return;
      }
      this.isValidateEmail = true;
    },
    validatePassword() {
      if (this.registerParams.password === "") {
        this.$toast("请输入密码");
        this.isValidatePassword = false;
        return;
      }
      if (!pwdReg.test(this.registerParams.password)) {
        this.$toast("密码的格式必须是8-16位字母和数字的组合");
        this.isValidatePassword = false;
        return;
      }
      this.isValidatePassword = true;
    },

    // 注册
    async submitRegister() {
      // 开启加载状态
      this.loading = true;
      this.validateNickName();
      this.validateAccount();
      this.validateEmail();
      this.validatePassword();

      if (this.registerParams.password !== this.registerParams.repPassword) {
        this.$toast("两次输入的密码不一样");
        this.isValidateRepPassword = false;
        this.loading = false;
        return;
      }

      //发送请求是实现数据提交
      let res = await this.$axios.post(this.$api.doRegister, this.registerParams);
      this.loading = false;
      if (res.status === 200 && res.data.code === 200) {
        this.$toast.success("注册成功");
        await this.$router.push("/login");
      } else {
        this.$toast.fail(res.data.message);
      }
    },
  }
};
</script>

<style scoped lang="less">

.register_container {

  .logo_container {
    img {
      width: 100%;
      height: 90%;
    }
  }

  .prompt {
    padding: 0 1rem;

    h2 {
      padding: 0;
      margin: 0;
    }

    p {
      margin: 0;
      margin-top: .5rem;
      color: #cccccc;
    }
  }

  .register_form {
    padding: 1rem 1rem 0 1rem;

    .form_item {
      padding: .4rem 0;
      box-sizing: border-box;
      background-color: #fff;
      border-bottom: 1px solid #000;
      margin-bottom: .8rem;

      .item_content {
        height: 2rem;

        .icon_container {
          display: block;
          width: 100%;
          height: 100%;
          font-size: 1.3rem;
          line-height: 2rem;

          i {
            margin-left: 20%;
          }
        }

        .lock {
          display: block;
          width: 100%;
          height: 100%;
          font-size: 1.3rem;
          line-height: 2rem;

          i {
            margin-left: 30%;
          }
        }

        .inputItem {
          width: 100%;
          height: 2rem;
          padding: 0;
          border: none;
        }
      }

      &:hover {
        border: none;
        border-radius: .4rem;
        box-shadow: 0 0 10px #ccc;
      }

    }

    .Radio {
      margin-top: 1.5rem;
      margin-bottom: 1rem;
    }
  }

  .buttonGroup {

    .registerButton {
      height: 40px;
      width: 80%;
      margin-bottom: .7rem;
      border: none;
      background: linear-gradient(to left, purple, #786AE4);
      margin-left: 10%;
    }
  }

  .loginTips {
    text-align: center;
    display: block;
    font-size: 12px;
  }

}
</style>
